<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        #table table {
        width: 100%;
        font-size: 14px;
        border: 1px solid #eee;
        }
        
        #table {
        padding: 0 10px;
        }
        
        table thead th {
        background: #b86f6f;
        padding: 10px;
        text-align: left;
        }
        
        table tbody td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        }
        
        table tbody td span {
        margin: 0 10px;
        cursor: pointer;
        }
        
        .delete {
        color: red;
        }
        
        .edit {
        color: #008cd5;
        }
        
        .add {
        border: 1px solid #eee;
        margin: 10px 0;
        padding: 15px;
        }
        
        input {
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 3px;
        margin-right: 15px;
        }
        
        button {
        background: #008cd5;
        border: 0;
        padding: 4px 15px;
        border-radius: 3px;
        color: #fff;
        }
        
        #mask {
        background: rgba(0, 0, 0, .5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 4;
        top: 0;
        left: 0;
        }
        
        .mask {
        width: 300px;
        height: 250px;
        background: rgba(255, 255, 255, 1);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 47;
        border-radius: 5px;
        }
        
        .title {
        padding: 10px;
        border-bottom: 1px solid #eee;
        }
        
        .title span {
        float: right;
        cursor: pointer;
        }
        
        .content {
        padding: 10px;
        }
        
        .content input {
        width: 270px;
        margin-bottom: 15px;
        }
        </style>
</head>

<body>
    <div id="app">
        <div class="add">
            <input type="text" v-model="addDetail.title" name="title" placeholder="发布内容" />
            <input type="text" v-model="addDetail.user" name="user" placeholder="发布人" />
            <input type="date" v-model="addDetail.dates" name="date" placeholder="发布时间" />
            <button @click="add" style="background:#8FBC8F;">新增</button>
        </div><br>
        <table cellpadding="0" cellspacing="0"  border="1" align="center">
            <thead >
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>发布人</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in newsList">
                    <td width="10%">{{index+1}}</td>
                    <td>{{item.title}}</td>
                    <td width="15%">{{item.user}}</td>
                    <td width="20%">{{item.dates}}</td>
                    <td width="20%">
                        <span @click="deletelist(item.id,index)" class="delete" style="color: #8FBC8F;">删除</span>
                        <span class="edit" @click="edit(item)" style="color: #CD5C5C;">编辑</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="mask" v-if="editlist">
            <div class="mask">
                <div class="title">
                         编辑
                    <span @click="editlist=false">x</span>
                </div>
                <div class="content">
                    <input type="text" v-model="editDetail.title" name="title" value="" placeholder="标题" />
                    <input type="text" v-model="editDetail.user" name="user" value="" placeholder="发布人" />
                    <input type="date" v-model="editDetail.dates" name="date" value="" placeholder="发布时间" />
                    <button @click="update">更新</button>
                    <button @click="editlist=false">取消</button>
                </div>
            </div>
        </div>
    </div>	
    <script>
        var app = new Vue({ 
				el:'#app',
				data:{
					addDetail:{},
					editlist:false,
					editDetail:{},
					newsList:[{
						title:'招募前端工程师',
						user:'cs',
						dates:'2020-08-10',
						id:"10001"
					},{
						title:'招募PHP工程师',
						user:'cs',
						dates:'2020-08-11',
						id:"10002"
					}],
					editid:''
				},
				mounted() { },
				methods:{
					add:function(){
						this.newsList.push({
							title:this.addDetail.title,
							user:this.addDetail.user,
							dates:this.addDetail.dates,			
						})
					},
					deletelist:function(id,i){
						this.newsList.splice(i,1)
					},
					edit:function(item){
						this.editDetail={
							title:item.title,
							user:item.user,
							dates:item.dates,
							id:item.id
						}
						this.editlist=true
						this.editid=item.id
					},
						update:function(){
							let _this=this
							for(let i=0;i<_this.newsList.length;i++){
								if(_this.newsList[i].id == this.editid){
									_this.newsList[i] = {
										title:_this.editDetail.title,
										user:_this.editDetail.user,
										dates:_this.editDetail.dates,
										id:this.editid
									}
									this.editlist=false;
								}
							}
						}
					}
				
			})
    </script>
</body>

</html>